<template>
  <div>
    <div style="margin-left: 160px">
      <el-select
        v-model="page.level"
        placeholder="请选择"
        @change="handLevelChange"
      >
        <el-option label="一级回复" value="1"> </el-option>
        <el-option label="二级回复" value="2"> </el-option>
      </el-select>
    </div>

    <div style="margin-left: 100px">
      <div
        v-for="(item, index) in myApply"
        :key="index"
        style="margin-top: 20px"
      >
        <div style="display: flex">
          <el-avatar
            size="large"
            :src="item.head"
            style="width: 50px; height: 50px"
          ></el-avatar>
          <div
            v-if="item.parentApply == null ? true : false"
            style="width: 70%; margin-left: 20px"
          >
            <div>
              <span>我回复了帖子</span
              ><span style="color: #ed6a12">{{ item.postName }}</span>
            </div>
            <div style="padding-top: 20px; width: 100%; color: rgb(64, 62, 62)">
              {{ item.content }}
            </div>
            <div style="margin-top: 10px; color: grey; font-size: 12px">
              <span>{{ item.applyTime }}</span
              ><span style="margin-left: 50px"
                ><el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="deleteMyApply(item.id,item.userId)"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确认删除吗？"
                >
                  <el-link slot="reference"
                    ><i class="el-icon-delete"></i>删除</el-link
                  >
                </el-popconfirm></span
              >
            </div>
            <el-divider></el-divider>
          </div>
          <div
            v-if="item.parentApply == null ? false : true"
            style="width: 70%; margin-left: 20px"
          >
            <div>
              <span>我在帖子</span
              ><span style="color: #ed6a12">{{ item.postName }}</span>
              <span>中</span
              ><span style="color: #ed6a12">@{{ item.parentName }}</span>
            </div>
            <div style="padding-top: 20px; width: 100%; color: rgb(64, 62, 62)">
              {{ item.content }}
            </div>
            <div style="margin-top: 10px; color: grey; font-size: 12px">
              <span>{{ item.applyTime }}</span
              ><span style="margin-left: 50px">
                <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="deleteMyApply(item.id,item.userId)"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确认删除吗？"
                >
                  <el-link slot="reference"
                    ><i class="el-icon-delete"></i>删除</el-link
                  >
                </el-popconfirm>
              </span>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>

      <!-- 分页开始 -->
      <br />
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 21, 27, 36]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
  </div>
</template>
    
<script>
import { getSelfApply,deleteMyApply } from "../../api/applyMG";
export default {
  name: "MyApply",
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        level: "1", //1就是一级评论，2就是二级评论
        userId: localStorage.getItem("userId"), //查这个用户的
      },
      myApply: [],
    };
  },

  methods: {
    async deleteMyApply(id){
      await deleteMyApply(id).then(res=>{
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getLists()
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      })
    },
    handLevelChange() {
      //评论等级变化,再重新获取内容
      this.page.currentPage = 1;
      this.getLists();
    },
    async getLists() {
      await getSelfApply(this.page).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.data.list);
          this.page.total = res.data.data.total;
          this.myApply = res.data.data.list;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getLists();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getLists();
    },
  },
  mounted() {
    this.getLists();
  },
};
</script>